<template>
	<view  class="aaa" style="width: 100%;height: 100%;">
		<canvas canvas-id="EkLJdeVuJeNdwvUnEdsYRjNYWVlUKDGW" id="EkLJdeVuJeNdwvUnEdsYRjNYWVlUKDGW" class="charts"
			@touchend="tap"/>
	</view>
</template>

<script>
	// import uCharts from '@/node_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		name: "uchartRing",
		data() {
			return {
				cWidth: 750,
				cHeight: 600,
				greenLandAll:{
					series: [{
							data: [{
								"name": "一级警报",
								"value": 0
							}, {
								"name": "二级警报",
								"value": 0
							}, {
								"name": "三级警报",
								"value": 0
							}, {
								"name": "四级警报",
								"value": 0
							},
							]
					}]
				}
			};
		},
		mounted() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(700);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
			
			this.getGreenLandAll().then(sucess=>{
				this.getServerData();
			})
		},
		methods: {
			getServerData() {
			   this.drawCharts('EkLJdeVuJeNdwvUnEdsYRjNYWVlUKDGW', this.greenLandAll);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "ring",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data.series,
					animation: true,
					timing: "easeOut",
					duration: 1000,
					rotate: false,
		 			rotateLock: false,
					background: "#FFFFFF",
					color: ["#ff0000", "#FAC858", "#3CA272", "#73C0DE", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4","#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					fontSize: 13,
					fontColor: "#666666",
					// 圆环显示注释
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 40,
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					title: {
						name: "风险预警",
						fontSize: 20,
						color: "#666666",
						offsetX: 0,
						offsetY: 0
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							centerColor: "#FFFFFF",
							customRadius: 0,
							linearType: "none"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#5500ff",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
			getGreenLandAll(){
				let user= JSON.parse( this.$storage.get("user"))
				return new Promise((resolve,reject)=>{
					this.$http.httpPost('greenLand/findAllByRole',user).then(sucess=>{
						if(sucess.data.status==200){
							// this.greenLandAll = sucess.data.data
							let Gdata = sucess.data.data
							this.$storage.set("greenLandAll" ,Gdata)
							Gdata.forEach((item,index)=>{
								if(item.waringGrade == 1){
									this.greenLandAll.series[0].data[0].value += 1
								}if(item.waringGrade == 2){
									this.greenLandAll.series[0].data[1].value += 1
								}if(item.waringGrade == 3){
									this.greenLandAll.series[0].data[2].value += 1
								}if(item.waringGrade == 4 || item.waringGrade == null){
									this.greenLandAll.series[0].data[3].value += 1
								}
								resolve()
							})
						}
					})
				})
				
			},
		}

	}
</script>

<style scoped lang="scss">
  .charts{
    width: 700rpx;
    height: 500rpx;
  }
</style>
